<template>
  <div class="mask">
  <div class="box">
    <div class="p1">
      <h3>提示</h3>
      <el-icon @click="close">
        <close-bold />
      </el-icon>
    </div>
    <div class="p2">
      <img
        src="https://img.axureshop.com/0e/a4/ac/0ea4ac0fe33148ab863f5e2758608948/images/%E6%89%BF%E5%BB%BA%E5%95%86%E7%99%BB%E8%AE%B0/u168.png"
        alt="">
      <span>确定要禁用该账号么?</span>
    </div>

    <div class="but">
      <el-form-item>
        <el-button type="primary" style="background-color: #FF9900; border: none;" @click="confirm">确定</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { CloseBold } from "@element-plus/icons";
import { ElMessage } from "element-plus";
import service from "../../../utils/service";

// 声明属性
const props = defineProps<{
  id: number;
  status:string;
}>();
// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();
// 取消
const close = () => {
  // 触发隐藏事件
  emit("hide");
};

// 点击禁用账号
const confirm = () => {
  const fan = props.status ? 2 : 1
  service({
  

    url: "/adminlist/"+props.id,
    method:"patch",
    data:{
      status:fan
    }
  }).then((res) => {
    
   
    
  });
  ElMessage({
    message: "禁用成功！",
    type: "success",
  });
  emit("hide");
  emit("updatesuccess");

}
</script>

<style scoped>
.mask {
 /* 遮罩层的写法 */
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.box {
  width: 600px;
  height: 200px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 999;
}

.p1 {
  font-size: 20px;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p1 h3 {
  font-size: 16px;
  color: #666;
  font-weight: 800;

}

.p2 {
  width: 400px;
  height: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-left: 80px;

}

.p2 img {
  width: 30px;
  height: 30px;
}

.p2 span {
  font-size: 18px;
  color: #666666;
  font-weight: 800;
}

.but {
  margin-top: 32px;
  margin-left: 420px;
}</style>